<template>
    <div class="min-h-screen bg-gray-100 flex items-center justify-center">
      <div class="bg-white p-8 rounded-lg shadow-md w-96">
        <h1 class="text-2xl font-bold mb-6 text-center text-gray-800">登录</h1>
        <form @submit.prevent="handleLogin" v-if="!isLoggedIn">
          <div class="mb-4">
            <label for="username" class="block text-sm font-medium text-gray-700 mb-2">用户名</label>
            <input
              type="text"
              id="username"
              v-model="username"
              class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
              required
            />
          </div>
          <div class="mb-6">
            <label for="password" class="block text-sm font-medium text-gray-700 mb-2 ">密码</label>
            <input
              type="password"
              id="password"
              v-model="password"
              class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
              required
            />
          </div>
          <button
            type="submit"
            class="w-full bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
          >
            登录
          </button>
        </form>
        <div v-else class="text-center text-green-600 font-semibold text-lg">
          登录成功！
        </div>
      </div>
    </div>
    <LoginForm/>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  
  const username = ref('')
  const password = ref('')
  const isLoggedIn = ref(false)
  
  const handleLogin = () => {
   
    if(username.value=='zou'&&password.value=='12345678'){
        isLoggedIn.value = true
    }else{
        alert('用户名或密码错误')
        username.value = ''
        password.value = ''
    }
    
  }
  
  </script>
  
  <style src="../dist/output.css"></style>